<template>
    <div class="card">
        <div class="item" v-for="item in data" :key="item.id" @click="goToArticleDetail(item)">
            <img :src="item.cover" :alt="item.title">
            <p class="title">{{ item.title }}</p>
            <p class="author">{{ item.author }}</p>
        </div>
    </div>
</template>
<script setup lang="ts">
interface IDataModal {
    id: string;
    title: string;
    author: string;
    content: string;
    cover: string;
    type: number;
    status: number;
    createTime: string;
    recentReadingTime: number;
}
interface IResultModal {
    code: number;
    data: IDataModal[];
}
defineProps<{
    data: any
}>()
const emit = defineEmits(['click'])

const goToArticleDetail = (item: IDataModal) => {
    emit('click', item);
}
</script>
<style scoped>
.card {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.card .item {
    width: 50%;
    padding: 1rem;
}

.card .item img {
    width: 100%;
    height: 10rem;
    border-radius: 0.5rem;
}

.card .item .title {
    font-size: 0.9rem;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
}

.card .item .author {
    font-size: 0.7rem;
    color: #999;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 隐藏超出容器的内容 */
    text-overflow: ellipsis;
    /* 超出部分用省略号表示 */
}
</style>